<!--
1. 通过routes 实现命名视图
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <style>
        .header{
            background-color: pink;
        }

        .container{
            display: flex;
        }

        .left{
            background-color: yellow;
            flex: 2;
        }

        .main{
            background-color: aqua;
            flex: 6;
        }

        .right{
            flex: 2;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
            <router-view name="right"></router-view>
        </div>
    </div>
    <script>
        var header={
            template:'<h1 class="header">Header头部区域</h1>'
        };
        var leftBox={
            template: '<h1 class="left">侧边栏区域</h1>'
        };
        var mainBox={
            template: '<h1 class="main">主体区域</h1>'
        };
        var rightBox={
            template: '<h1 class="right">右边区域</h1>'
        };

        var router=new VueRouter({
            routes:[
                {
                    path:'/',
                    components:{
                        left:leftBox,
                        main:mainBox,
                        default:header,
                        right:rightBox
                    }
                }
            ]
        });

        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            router:router
        })
    </script>
</body>
</html>